<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./fonts/iconfont.css">
    <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        .page__hd img {
        width: 10rem;
        height: 4.232977rem;
    }
    /* 正方形怎么取才行 */
        .page__hd .hd__portrait{
            width: 2.0rem;
            height: 2.0rem;
            border-radius: 12px;
            position: absolute;
            bottom: 16.75rem;
            right: 0;
            margin-right: 0.337777rem;
        }
        .page__bd{
            width: 10rem;
            height: 5.767rem;
        }
        .people__figcaption{
            padding-top: 1.77935rem;
            padding-left: 0.302491rem;
            display: flex;
        }
        .peopic{
            width: 1.3rem;
            height: 1.3rem;
            border-radius: 12px;
        }
        .people__name{
            color: #546993;
            font-size: 16px; 
            font-family: Sans-serif;
            padding-left: 0.266903rem;
            /* width:10rem; */
        }
        .people__word{
            
            font-size: 20px;
            font-weight: 900;
            padding-left: 0.266903rem;
            /* left: -1rem;
            position: relative;
            bottom: -0.7rem; */
        }
        p{
            font-family: Sans-serif;
            font-weight: 900;
            font-size: 20px;
        }
        .moments img{
           
            height: 9.80427rem;
            
            width: 5rem;
        }
        .moments{
            padding-left: 1.9rem;
        }
        .btn{
            padding-left: 1.9rem;
            padding-top: 0.1rem;
            display: flex;
        }
        .time{
            color: #b1b1b1;
            font-size: 14px;
        }
        .btn_second{
            background-color: #f7f7f7;
            width: 0.871886rem;
            height: 0.5338rem;
            border-radius: 6px;
            float: right;
            position: relative;
            left: 5.5rem;
            /* margin: 2px; */
        }
        i{
            display: block;
            margin-left: 4px;
        }
        /* .iconfont {
            position: relative;
            top: 0;
            bottom: 0;
            right: 0;
            left: 0;
        } */
        .comment{
            background-color:#f7f7f7;
            margin-left: 1.9rem ;
            width: 7.6rem;
            height: 0.7rem;
            margin-top:0.3rem ;
            border-radius: 4px;
            display: flex;

        }
        .pic i{
            margin-left: 0.2rem;
            padding-top: 0.15rem; 
        }
        .name{
            margin-left: 0.1rem;
            padding-top: 0.18rem; 
            color: #546993;
            font-size: 16px; 
            font-family: Sans-serif;
            font-weight: 700;
        }
        .bottom{
            background-color: #f7f7f7;
            width: 6rem;
            height: 1rem;
            position: absolute;
            bottom: 0;
            left: 2rem;
            border-radius: 30px;
            color: #07c160;
            display: flex;
            
            
        }
        .bottom_btn{
            margin-left: 0.5rem;
            font-size: 20px;
            padding-top: 0.2rem;
            font-weight: 700;
        }
        .bottom_pic img{
            width: 0.8rem;
            height: 0.8rem;
            padding-left: 0.1rem;
            padding-top: 0.1rem;
        }
    </style>
</head>

<body>
    <div class="page">
        <div class="page__hd">
            
                <img src="https://img1.baidu.com/it/u=4214148303,214851674&fm=26&fmt=auto&gp=0.jpg" alt="">
        <div class="hd">   
                <img src="https://img0.baidu.com/it/u=2592042537,1864064944&fm=26&fmt=auto&gp=0.jpg" alt="" class="hd__portrait">
        </div>
        </div>
        <div class="page__bd">
           
                   
                    <div class="people__figcaption">
                        
                        <div class="people__pic">
                           <img src="https://img1.baidu.com/it/u=3166639134,1440270722&fm=26&fmt=auto&gp=0.jpg" class="peopic"> 
                        </div>
                        <div class="word">
                        <div class="people__name">
                           <p> 莉莉</p>
                        </div>
                        <div class="people__word">
                            有没有一起打游戏的鸭~
                        </div>
                       </div>
                    </div>

                    <div class="moments">
                        <img src="https://img1.baidu.com/it/u=4047851491,554150911&fm=26&fmt=auto&gp=0.jpg">
                    </div>
                    <div class="btn">
                        <div class="time">1分钟前</div>
                        <div class="btn_second"><i class="iconfont icon-shenglvehao" style="font-size: 22px;"></i></div>
                    </div>
                    <div class="comment">
                        <div class="pic">
                            <i class="iconfont icon-xinaixin" style="font-size: 16px;"></i>

                        </div>
                        <div class="name">
                            CURRY
                        </div>
                    </div>

                    <div class="bottom">
                        
                        <div class="bottom_btn">跳到还没看的位置</div>
                        <div class="bottom_pic"><img src="https://img2.baidu.com/it/u=1077360284,2857506492&fm=26&fmt=auto&gp=0.jpg"></div>

                    </div>
                
        </div>
        
        
    </div>
</body>
</html>